<script setup lang="ts">
import { reqAttrInfoList } from '@/api/product/attr'
import type { IAttrValue } from '@/api/product/attr/types'
import { reqSpuImageList, reqSaleAttrList, reqAddSku } from '@/api/product/spu'
import type { ISpuImage, ISpuSaleAttrData, ISkuFormData } from '@/api/product/spu/types'
const $emits = defineEmits(['changeScene'])
const backScene = () => {
  $emits('changeScene', 0)
}
const attrArr = ref<IAttrValue[]>([])
const saleArr = ref<ISpuSaleAttrData[]>([])
const imgArr = ref<ISpuImage[]>([])
const formData = reactive<ISkuFormData>({
  category3Id: 0,
  spuId: 0,
  tmId: 0,
  skuName: '',
  price: 0,
  weight: 0,
  skuDesc: '',
  skuAttrValueList: [], // { attrId:'',valueId:''}
  skuSaleAttrValueList: [], // { saleAttrId:'',saleAttrValueId:''}
  skuDefaultImg: ''
})
const initData = async (cate1Id: number, cate2Id: number, cate3Id: number, spuId: number, tmId: number) => {
  formData.category3Id = cate3Id
  formData.spuId = spuId
  formData.tmId = tmId
  const res1 = await reqAttrInfoList(cate1Id, cate2Id, cate3Id)
  const res2 = await reqSaleAttrList(spuId)
  const res3 = await reqSpuImageList(spuId)
  if (res1.code == 200) attrArr.value = res1.data.slice(0, 8)
  if (res2.code == 200) saleArr.value = res2.data
  if (res3.code == 200) imgArr.value = res3.data
}
defineExpose({ initData })
const tableRef = ref()
const setDefaultImg = (row: any) => {
  imgArr.value.forEach((item) => {
    tableRef.value.toggleRowSelection(item, false)
  })
  tableRef.value.toggleRowSelection(row, true)
  formData.skuDefaultImg = row.imgUrl
}
const saveData = async () => {
  formData.skuAttrValueList = attrArr.value.reduce((prev, next) => {
    if (next.attrIdAndValueId) {
      let [attrId, valueId] = next.attrIdAndValueId.split(':')
      prev.push({ attrId, valueId })
    }
    return prev
  }, [] as any)
  saleArr.value.map((item) => {
    if (item.saleIdAndValueId) {
      let [saleAttrId, saleAttrValueId] = item.saleIdAndValueId.split(':')
      formData.skuSaleAttrValueList.push({ saleAttrId, saleAttrValueId })
    }
  })
  const res = await reqAddSku(formData)
  if (res.code == 200) {
    ElMessage.success('Sku保存成功')
    $emits('changeScene', 0)
  } else {
    ElMessage.error('Sku保存失败')
  }
}
</script>

<template>
  <div>
    <el-form label-width="100px">
      <el-form-item label="sku名称"><el-input v-model="formData.skuName" /></el-form-item>
      <el-form-item label="价格(元)"><el-input type="number" v-model="formData.price" /></el-form-item>
      <el-form-item label="重量(克)"><el-input type="number" v-model="formData.weight" /></el-form-item>
      <el-form-item label="sku描述"><el-input type="textarea" v-model="formData.skuDesc" /></el-form-item>
      <el-form-item label="平台属性">
        <el-form inline label-width="80px">
          <el-form-item :label="item.attrName" v-for="item in attrArr" :key="item.id">
            <el-select v-model="item.attrIdAndValueId" style="margin: 5px">
              <el-option :label="item1.valueName" :value="`${item.id}:${item1.id}`" v-for="item1 in item.attrValueList" :key="item1.id" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form inline label-width="80px">
          <el-form-item :label="item.saleAttrName" v-for="item in saleArr" :key="item.id">
            <el-select v-model="item.saleIdAndValueId">
              <el-option
                :label="item1.saleAttrValueName"
                :value="`${item.id}:${item1.id}`"
                v-for="item1 in item.spuSaleAttrValueList"
                :key="item1.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片名称">
        <el-table :data="imgArr" border stripe ref="tableRef">
          <el-table-column type="selection" align="center" width="80px"> </el-table-column>
          <el-table-column label="图片" align="center">
            <template #default="{ row }">
              <el-image :src="row.imgUrl" style="width: 100px; height: 100px"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="imgName"> </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="primary" size="default" @click="setDefaultImg(row)">设置默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveData">保存</el-button>
        <el-button @click="backScene">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped></style>
